<!-- global-menu/index.vue - 菜单总控制器 -->
<template>
  <!-- 🎯 根据配置选择菜单版本 -->
  <component 
    :is="currentMenuComponent" 
    :layout-mode="actualLayoutMode"
    :menu-config="menuConfig"
  />
</template>

<script setup>
import { computed } from 'vue'
import { useLayoutManage } from '@/layouts/layoutManage.js'
import StaticMenu from './StaticMenu.vue'
import DynamicMenu from './DynamicMenu.vue'

// 🎯 Props - 菜单配置
const props = defineProps({
  useDynamic: {
    type: Boolean,
    default: false  // 默认使用静态版本（开发时方便）
  }
})

// 🎯 布局管理
const {
  actualLayoutMode,
  currentLayoutConfig,
  layoutSetting,
  siderProps
} = useLayoutManage()

// 🎯 当前使用的菜单组件（静态 or 动态）
const currentMenuComponent = computed(() => {
  return props.useDynamic ? DynamicMenu : StaticMenu
})

// 🎯 传递给子组件的配置
const menuConfig = computed(() => ({
  layoutMode: actualLayoutMode.value,
  layoutConfig: currentLayoutConfig.value,
  collapsed: layoutSetting.value.sidebarCollapsed,
  siderProps: siderProps.value
}))
</script>

<style scoped>
/* 控制器本身不需要样式 */
</style>